<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>普惠商城-个人中心-订单中心-线上订单</title>
	<link rel="stylesheet" href="css/common.css">
	<!-- 个人中心通用样式personal.css -->
	<link rel="stylesheet" href="css/personal.css">
	<link rel="stylesheet" href="css/personal-order-online.css">
	<link rel="stylesheet" href="css/paging.css">
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.page.js"></script>
	<style>
		.refundBox{
			position: relative;
			position: absolute;
			top: 0;
			right: 0;
			height: 358px;
			width: 418px;
			padding: 20px;
			z-index: 999;
			border: 1px solid #ccc;
			background: #fff;
			-webkit-border-radius:2px;
			-moz-border-radius:2px;
			border-radius:2px;
			display: none;
		}
		.refundBox h2{
			height: 50px;
			line-height: 40px;
			font-size: 14px;
			font-weight: normal;
			border-bottom: 1px solid #ccc;
		}
		.CloseBut{
			position: absolute;
			width: 50px;
			height: 50px;
			top: 5px;
			right: 0;
			text-align: center;
			line-height: 50px;
			font-size: 14px;
			color:#818181;
		}
		.refundRemark{
			height: 48px;
			line-height: 48px;
			font-size:14px;
			color: #3f3f3f;
		}
		.refundTxt{
			height: 178px;
			width: 398px;
			border:1px solid #ccc;
			-webkit-border-radius:2px;
			-moz-border-radius:2px;
			border-radius:2px;
			padding: 10px;
			font-size: 14px;
			color:#ccc;
			margin-bottom: 20px;
		}
		.refundBut{
			height: 40px;
			text-align: center;
		}
		.refundBut input[type="button"]{
			width: 120px;
			height: 40px;
			-webkit-border-radius:8px;
			-moz-border-radius:8px;
			border-radius:8px;
			margin: 0 10px;
			cursor: pointer;
		}
		.refundBut .orange{
			background: #ce5242;
			color:#fff;
			border:1px solid #ce5242;
		}
		.refundBut .gray{
			background: #fafafa;
			color: #3f3f3f;
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	
	<!-- 顶部导航条开始 -->
	<div class="puhuishopping_common_titlelink" id="puhuishopping_common_titlelink">
		<!-- 导航条左部 -->
		<div class="centerbody">
			<div class="title_left">
				<a href="普惠商城-商城首页.html" class="puhuishopping_common_city" id="puhuishopping_common_city">返回普惠商城首页</a>
				<!-- <div class='citylist' id='citylist'></div> -->
			</div>	
		<!-- 导航条右部 -->
			<div class="title_right">
				您好&nbsp;&nbsp;,&nbsp;<a href="普惠商城-商城首页-登录页面.html" class="puhuishopping_common_login" id="puhuishopping_common_login">请登录</a>
				<a href="普惠商城-商城首页-注册页面.html" class="puhuishopping_common_hyzc">会员注册</a>
				<a href="普惠商城-个人中心-订单中心-线上订单.html" class="puhuishopping_common_wddd">我的订单</a>
				<a href="javascript:void(0);" class="puhuishopping_common_ydsc">移动商城</a>
				<div style="clear: both"></div>
			</div>
			<!-- 未登录 -->
			<!-- 	<div class="title_right">
                    您好&nbsp;&nbsp;,&nbsp;<a href="普惠商城-个人中心.html" class="puhuishopping_common_login" id="puhuishopping_common_login">普惠会员</a>
                    <a href="#" class="puhuishopping_common_hyzc">[退出]</a>
                    <a href="普惠商城-个人中心-订单中心-线上订单.html" class="puhuishopping_common_wddd">我的订单</a>
                    <a href="javascript:void(0);" class="puhuishopping_common_ydsc">移动商城</a>
                    <div style="clear: both"></div>
                </div> -->
		</div>	
	</div>
	<!-- 顶部导航条结束 -->
	<!-- 顶部搜索栏部分开始 -->
	<div class="personal_box_tit">
		<div class="centerbody">
			<img src="images/普惠logo最终版白色.png" alt="" class="logo3">
			<a href="普惠商城-个人中心.html" class="personal_box_tit_link">会员首页</a>
			<a href="普惠商城-个人中心-资产中心-我的积分.html" class="personal_box_tit_link">我的积分</a>
			<div class="my_shoplist_box">
				<input type="button" class="my_shoplist" id="my_shoplist" value="我的购物车">
				<img src="images/0.png" alt="" class="num_ico">	
			</div>
			<div class="searchbox">
				<input type="text" class="searchtxt" placeholder="请输入搜索的内容"><input type="button" class="searchbtn" value="搜索">
			</div>
		
			<div style="clear: both"></div>
		</div>
	</div>
	<!--个人中心中间主体框架  -->
	<div class="centerbody personal_middle">
		<!-- 左侧通用导航栏 -->
		<div class="personal_middle_nav">
			<ul>
				<li>账户设置</li>
				<li><a href="普惠商城-个人中心_帐户设置_个人信息.html">个人信息</a></li>
				<li><a href="普惠商城-个人中心-账户设置-收货地址.html">收货地址</a></li>
				<li><a href="普惠商城-个人中心-账户设置-账户安全.html">账户安全</a></li>
				<li><a href="普惠商城-个人中心-账户设置-我的银行卡.html">我的银行卡</a></li>
			</ul>
			<ul>
				<li>资产中心</li>
				<li><a href="javascript:void(0);">我的余额</a></li>
				<li><a href="普惠商城-个人中心-资产中心-我的积分.html">我的积分</a></li>
			</ul>
			<ul>
				<li>订单中心</li>
				<li><a href="普惠商城-个人中心-订单中心-线上订单.html" class="linked">线上订单</a></li>
				<li><a href="普惠商城-个人中心-订单中心-线下订单.html">线下订单</a></li>
			</ul>
			<ul>
				<li>推广中心</li>
				<li><a href="普惠商城-个人中心-推广中心-我是推荐人.html">我是推荐人</a></li>
				<li><a href="普惠商城-个人中心-推广中心-我是推广师.html">我是推广师</a></li>
			</ul>
		</div>
		<div class="centerbody personal_middle_main">
			<div class="personal_middle_main_tit">
				<span>订单中心</span>><span>线上订单</span>
			</div>
			<!-- 订单tab标签 -->
			<div data-role="page">
        		<div data-role = "content-floud">         
           			 <div style="font-family: '微软雅黑';">
		                <ul id="hear">
		                    <li class="action" style="border-bottom: 2px solid red;height: 43px;"><a href="#" >全部订单<span style="color: red;"></span></a></li>
		                    <li><a href="#" >待付款<span style="color: red;"></span></a></li>
		                    <li><a href="#" >待发货<span style="color: red;"></span></a></li>
		                    <li><a href="#" >待收货<span style="color: red;"></span></a></li>
		                    <li><a href="#" style="border-right:none;">已完成<span style="color: red;"></span></a></li>
		                </ul>
             		<ul id="contentop">
		                 <li class="box1 action" style="width: 1020px;">
		                 	<div class="page show">
			                    <div class="box_tit">
									<span>订单详情</span>
									<span>收货人</span>
									<span>金额</span>
									<!--<span>待返积分</span>
									<span>已返积分</span>-->
									<span>状态</span>
									<span>操作</span>
								</div>
								<div class="goods_info_box">
									<div class="box_tit_2">
									<span>订单号：</span>
									<span>4979026377</span>
									<span>供应商名称</span>
									<span class="time">下单时间：</span>
									<span class="time">2017-3-27 00:16:34</span>	
									</div>
									<div  style="background: red;">
										<div class="box_big" >
											<div class="box_big_detail">
												<img src="images/图层-10.png" alt="" class="box_big_detail_img">
												<p class="box_big_detail_info">魅族 魅蓝Note5 全网通公开版 16GB	月光银 移动联通电信4G</p>
												<p  class="box_big_detail_info"><span class="box_big_detail_price">¥1099.00</span><span class="box_big_detail_num">1</span></p>
												<div style="clear: both;"></div>
											</div>
										</div>
											<span class="box_small">王小二</span>
											<span class="box_small">¥1000.00</span>
											<!--<span class="box_small">100000</span>
											<span class="box_small">0</span>-->
											<span class="box_small">待付款</span>
											<span class="box_small">
											<a href="普惠商城-个人中心-订单中心-线上订单-订单详情.html">订单详情</a>
											<a href="普惠商城-个人中心-订单中心-线上订单-订单付款.html">立即付款</a>
											<a href="#" class="cancel_order">取消订单</a></span>
										
										<div class="box_big">
											<div class="box_big_detail">
													<img src="images/图层-10.png" alt="" class="box_big_detail_img">
												<p class="box_big_detail_info">魅族 魅蓝Note5 全网通公开版 16GB	月光银 移动联通电信4G</p>
												<p  class="box_big_detail_info"><span class="box_big_detail_price">¥1099.00</span><span class="box_big_detail_num">20</span></p>
												<div style="clear: both;"></div>
											</div>
										</div>
											<span class="box_small"></span>
											<span class="box_small"></span>
											<!--<span class="box_small"></span>
											<span class="box_small"></span>-->
											<span class="box_small"></span>
											<span class="box_small"></span>
									</div>
								
								</div>
								<div class="goods_info_box">
									<div class="box_tit_2">
										<span>订单号：</span>
										<span>4979026377</span>
										<span>供应商名称</span>
										<span class="time">下单时间：</span>
										<span class="time">2017-3-27 00:16:34</span>
										
									</div>
									<div  style="background: red;">
										<div class="box_big" >
											<div class="box_big_detail">
												<img src="images/图层-10.png" alt="" class="box_big_detail_img">
												<p class="box_big_detail_info">魅族 魅蓝Note5 全网通公开版 16GB	月光银 移动联通电信4G</p>
												<p  class="box_big_detail_info"><span class="box_big_detail_price">¥1099.00</span><span class="box_big_detail_num">1</span></p>
												<div style="clear: both;"></div>
											</div>
										</div>
											<span class="box_small">王小二</span>
											<span class="box_small">¥1000.00</span>
											<!--<span class="box_small">100000</span>
											<span class="box_small">0</span>-->
											<span class="box_small">待发货</span>
											<span class="box_small"><a href="普惠商城-个人中心-订单中心-线上订单-订单详情.html">订单详情</a>
											<a href="#" class="confirm_order">确认收货</a>
											<a href="javascript:void(0);"></a></span>
										
										<div class="box_big">
											<div class="box_big_detail">
													<img src="images/图层-10.png" alt="" class="box_big_detail_img">
												<p class="box_big_detail_info">魅族 魅蓝Note5 全网通公开版 16GB	月光银 移动联通电信4G</p>
												<p  class="box_big_detail_info"><span class="box_big_detail_price">¥1099.00</span><span class="box_big_detail_num">20</span></p>
												<div style="clear: both;"></div>
											</div>
										</div>
											<span class="box_small"></span>
											<span class="box_small"></span>
											<span class="box_small"></span>
											<span class="box_small"></span>
											<!--<span class="box_small"></span>
											<span class="box_small"></span>-->
									</div>
									
								</div>
								<div class="goods_info_box">
									<div class="box_tit_2">
										<span>订单号：</span>
										<span>4979026377</span>
										<span>供应商名称</span>
										<span class="time">下单时间：</span>
										<span class="time">2017-3-27 00:16:34</span>
										
									</div>
									<div  style="background: red;">
										<div class="box_big" >
											<div class="box_big_detail">
												<img src="images/图层-10.png" alt="" class="box_big_detail_img">
												<p class="box_big_detail_info">魅族 魅蓝Note5 全网通公开版 16GB	月光银 移动联通电信4G</p>
												<p  class="box_big_detail_info"><span class="box_big_detail_price">¥1099.00</span><span class="box_big_detail_num">1</span></p>
												<div style="clear: both;"></div>
											</div>
										</div>
											<span class="box_small">王小二</span>
											<span class="box_small">¥1000.00</span>
											<!--<span class="box_small">100000</span>
											<span class="box_small">0</span>-->
											<span class="box_small">待发货</span>
											<span class="box_small"><a href="普惠商城-个人中心-订单中心-线上订单-订单详情.html">订单详情</a>
											<a href="#" class="refund_order">申请退款</a>
											<a href="javascript:void(0);"></a></span>
										
										<div class="box_big">
											<div class="box_big_detail">
													<img src="images/图层-10.png" alt="" class="box_big_detail_img">
												<p class="box_big_detail_info">魅族 魅蓝Note5 全网通公开版 16GB	月光银 移动联通电信4G</p>
												<p  class="box_big_detail_info"><span class="box_big_detail_price">¥1099.00</span><span class="box_big_detail_num">20</span></p>
												<div style="clear: both;"></div>
											</div>
										</div>
											<span class="box_small"></span>
											<span class="box_small"></span>
											<span class="box_small"></span>
											<span class="box_small"></span>
											<!--<span class="box_small"></span>
											<span class="box_small"></span>-->
									</div>
									
								</div>
								<div class="goods_info_box" style="height:168px;">
									<div class="box_tit_2">
										<span>订单号：</span>
										<span>4979026377</span>
										<span>供应商名称</span>
										<span class="time">下单时间：</span>
										<span class="time">2017-3-27 00:16:34</span>
										
									</div>
									<div  style="background: red;">
										<div class="box_big" >
											<div class="box_big_detail">
												<img src="images/图层-10.png" alt="" class="box_big_detail_img">
												<p class="box_big_detail_info">魅族 魅蓝Note5 全网通公开版 16GB	月光银 移动联通电信4G</p>
												<p  class="box_big_detail_info"><span class="box_big_detail_price">¥1099.00</span><span class="box_big_detail_num">1</span></p>
												<div style="clear: both;"></div>
											</div>
										</div>
											<span class="box_small">王小二</span>
											<span class="box_small">¥1000.00</span>
											<!--<span class="box_small">100000</span>
											<span class="box_small">0</span>-->
											<span class="box_small">已退款</span>
											<span class="box_small"><a href="普惠商城-个人中心-订单中心-线上订单-订单详情.html">订单详情</a>
											<a href="普惠商城-个人中心-订单中心-线上订单-申请退货.html">退货详情</a>
											<a href="javascript:void(0);"></a></span>
									</div>
									
								</div>
							</div>
							<div class="page">
							aaaaaa	
							</div>
							<div class="page">
							aaaaaa	
							</div>
							 <div class="tcdPageCode"></div>
						</li>
	                    <li>
	                      yishiyong
	                    </li>
	                    <li>
	                        yiguoqi
	                    </li>
	                    <li>
	                        yiguoqi
	                    </li>
	                    <li>
	                        yiguoqi
	                    </li>
		            </ul>
            		</div>           
       			 </div>                   
   			 </div>
	
			
		</div>
		<div style="clear:both;"></div>
	</div>
	
<!-- 页面底部 -->
	<div class="foot-banner" style="margin-top: 0;">
		<div class="mod_help_list">
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">帮助中心</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">购物中心</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">配送中心</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">支付中心</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">常见问题</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">售后服务</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">退换货政策</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">退换货流程</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">关于我们</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">公司介绍</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">普惠商城简介</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">联系客服</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">支付方式</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">微信支付</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">支付宝支付</a></li>

					</ul>
			</div>
		</div>	
		<div class="copyright">
			<p>©2016北京普惠联盟商贸有限公司 puhui315.com 京ICP证070791号|京ICP备10211739号|电子公告服务规则</p>
			<p>电子商务经营许可证(京)字第03889号</p>
			<p>京公网安备11010502025545号</p>
			<p style="height: 34px;width:350px;margin:17px auto 25px">
			<a href="javascript:void(0);" class="outlink link-space"><img src="images/foot-1.png" alt=""></a>
			<a href="javascript:void(0);" class="outlink link-space"><img src="images/foot-2.png" alt=""></a>
			<a href="javascript:void(0);" class="outlink"><img src="images/foot-3.png" alt=""></a>
			</p>
		</div>

	</div>
<!-- 弹窗部分 -->
	<div class="refundBox">
		<a class="CloseBut" href="javascript:void(0);">X</a>
		<h2>申请退款</h2>
		<p class="refundRemark">退款备注:</p>
		<textarea class="refundTxt" placeholder="请输入退款理由"></textarea>
		<div class="refundBut">
			<input class="gray" type="button" value="申请退款">
			<input class="gray cancel_btn" type="button" value="取消">
		</div>
	</div>
		<div class="shadow">
		</div>
		<!-- <div class="login_box_2 cancel_order" >
			<form action="">
				<div class="cancel_order_box">
				<p class="cancel_order_txt">是否要取消该订单？</p>
				<p style="margin-left: 49px;">
					<input type="button" class="cancel_order_btn" value="是" style="font-size: 14px;">
					<input type="button" class="cancel_order_btn" value="否" style="font-size: 14px;">
				</p>
				</div>
		</form>		
				
		</div> -->
	
		<div class="login_box_2 order_cancel" >
			<form action="">
				<div class="cancel_order_box">
				<p class="cancel_order_txt">是否要取消该订单？</p>
				<p style="margin-left: 49px;">
					<input type="button" class="cancel_order_btn" value="是" style="font-size: 14px;">
					<input type="button" class="cancel_order_btn cancel_btn" value="否" style="font-size: 14px;">
				</p>
				</div>
		</form>		
				
		</div>

		<div class="shadow">
		</div>
		<div class="login_box_2 order_confirm" >
			<form action="">
				<div class="cancel_order_box">
				<p class="cancel_order_txt">是否要确认收货？</p>
				<p style="margin-left: 49px;">
					<input type="button" class="cancel_order_btn" value="是" style="font-size: 14px;">
					<input type="button" class="cancel_order_btn cancel_btn" value="否" style="font-size: 14px;">
				</p>
				</div>
		</form>		
				
		</div>
	
</body>
<script th:inline="javascript">
$(function(){
	$(".box1 input:checked").parent().parent().addClass("selected");
	$(".box1 input").change(function(){
        $(".box1 input:checked").parent().parent().addClass("selected").siblings().removeClass("selected");
    });
	$('input.paybutton').eq(0).addClass('choose');

	$('input.paybutton').hover(function(){
		$(this).addClass('choose');
		$(this).siblings().removeClass('choose');
	},function(){
		$(this).removeClass('choose');
	})
	$('.cancel_btn').click(function(){
		$('.shadow').css('display','none');
		$('.login_box_2').css('display','none');
		$('.refundBox').css('display','none');
	})
	$('input.cancel_order_btn').hover(function(){
		console.log(1);
		$(this).addClass('confirm');
		$(this).siblings().removeClass('confirm');
	},function(){
		$(this).removeClass('confirm');
	})
	$('input.gray').hover(function(){
		console.log(1);
		$(this).addClass('confirm');
		$(this).siblings().removeClass('confirm');
	},function(){
		$(this).removeClass('confirm');
	})
	$('.cancel_small').click(function(){
		$('.shadow').css('display','none');
		$('.cancel_order').css('display','none');
	})
		$('.CloseBut').click(function(){
		$('.shadow').css('display','none');
		$('.refundBox').css('display','none');
	})

	$('.cancel_order').click(function(){
		$('.shadow').css('display','block');
		$('.order_cancel').css('display','block');
	})
	$('.shadow').css('height',$(window).height());
		$('.order_cancel').css('top',($(window).height()-$('.order_cancel').height())/2);
		$('.order_cancel').css('left',($(window).width()-$('.order_cancel').width())/2);
	$(window).resize(function(){
		$('.shadow').css('height',$(window).height());
		$('.order_cancel').css('top',($(window).height()-$('.order_cancel').height())/2);
		$('.order_cancel').css('left',($(window).width()-$('.order_cancel').width())/2);
	})
	$('.confirm_order').click(function(){
		$('.shadow').css('display','block');
		$('.order_confirm').css('display','block');
	})
	$('.shadow').css('height',$(window).height());
		$('.order_confirm').css('top',($(window).height()-$('.order_confirm').height())/2);
		$('.order_confirm').css('left',($(window).width()-$('.order_confirm').width())/2);
	$(window).resize(function(){
		$('.shadow').css('height',$(window).height());
		$('.order_confirm').css('top',($(window).height()-$('.order_confirm').height())/2);
		$('.order_confirm').css('left',($(window).width()-$('.order_confirm').width())/2);
	})
	$('.refund_order').click(function(){
		$('.shadow').css('display','block');
		$('.refundBox').css('display','block');
	})
	$('.shadow').css('height',$(window).height());
		$('.refundBox').css('top',($(window).height()-$('.refundBox').height())/2);
		$('.refundBox').css('left',($(window).width()-$('.refundBox').width())/2);
	$(window).resize(function(){
		$('.shadow').css('height',$(window).height());
		$('.refundBox').css('top',($(window).height()-$('.refundBox').height())/2);
		$('.refundBox').css('left',($(window).width()-$('.refundBox').width())/2);
	})
	$("#hear li").click(function() {
		$(this).css({
			borderBottom: "2px solid red",
			height: "43px"
		}).siblings().css({
			borderBottom: "none",
			height: "45px"
		});
	});
	/*分页*/
    $(".tcdPageCode").createPage({
        pageCount:100,
        current:1,
        backFn:function(p){
            //console.log(p);
        }
    });
    $("#hear li").click(function(){
        $(this).addClass("action").siblings().removeClass("action");
        var index = $(this).index();
        $("#contentop li").eq(index).css("display","block").siblings().css("display","none");
    });
});
</script>

</html>